﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
    <title>ByHand Frontend</title>
    <!-- Bootstrap core CSS -->
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/bootstrap-glyphicons.css" rel="stylesheet" />
    <link href="~/Content/css/main.css" rel="stylesheet" />
</head>
<body>
    @model ByHand.Model.Product
    @{
        Layout = null;
        //var imgs = Model.ImagePath.Split(';').Where(i => i.Length > 0).ToArray();
        //for (int i = 0; i < imgs.Length; i++)
        //{
        //    imgs[i] = imgs[i] + "?w=250&h=190&q=90&format=jpg&mode=crop";
        //}
        var cities = ByHand.Services.Implements.UtilityService.GetAllCities();
        var districts = ByHand.Services.Implements.UtilityService.GetAllDistrict();
        var tempID = ViewData["tempID"] as string;
        var options = ViewData["options"] as List<ByHand.Model.ProductOption>;
        var user = ViewData["user"] as ByHand.Model.User;
    }
    <!-- Modal -->
    <div id="byhand-wrapper-widgetpopup">
        <div class="modal-body">
            <ul class="nav nav-tabs hidden-tab-payment">
                <li class="active"><a href="#checkout-product" data-toggle="tab" data-step="1">1. Chọn sản phẩm</a></li>
                <li><a href="#checkout-address" data-toggle="tab" data-step="2">2. Thông tin khách hàng</a></li>
                <li><a href="#checkout-payment" data-toggle="tab" data-step="3">3. Thanh toán</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="checkout-product">
                    <h3 id="product-title" style="display: none">@Model.Title</h3>
                    @if (options.Count > 0)
                    {
                        <h4>Chọn sản phẩm và bấm "Thêm vào giỏ hàng":</h4>
                    }
                    else
                    {
                        <h4>Chọn số lượng sản phẩm và bấm Tiếp tục:</h4>
                    }
                    <form class="product-options">
                        @foreach (var item in options)
                        {
                            var values = item.OptionValue.Split(';').ToList();
                            <div class="form-group">
                                <h5 id="option-name-@item.ID">@item.OptionName</h5>
                                <select class="form-control" id="select-option-value-@item.ID">
                                    @foreach (var itemvalue in values)
                                    {
                                        <option value="@itemvalue" data-tempid="@values.IndexOf(itemvalue)">@itemvalue</option>
                                    }
                                </select>
                            </div>
                        }
                        @if (options.Count > 0)
                        {
                            <div class="form-group">
                                <button type="button" class="btn btn-success" onclick="addItemToCart();">Thêm vào giỏ hàng</button>
                            </div>
                        }
                    </form>
                    <h4><span class="glyphicon glyphicon-shopping-cart"></span>Giỏ hàng</h4>
                    <div class="table-responsive">
                        <table class="table table-bordered table-condensed" id="table-cart">
                            <tbody>
                                <tr>
                                    <th>Sản phẩm</th>
                                    <th>Số lượng</th>
                                    <th>Giá tiền</th>
                                    <th>Tổng</th>
                                </tr>
                                <tr>
                                    <td colspan="3"><strong>Tổng Tiền</strong></td>
                                    <td id="byhand-final-money"><strong>0đ</strong></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane" id="checkout-address">
                    <form class="form-horizontal" role="form" id="byhand-infocustomer-form">
                        <input type="hidden" value="" name="optionsvalue" id="optionsvalue" />
                        <input type="hidden" value="0" name="quantity" id="inputQuantity" />
                        <h4>Điền đầy đủ thông tin sau:</h4>
                        <div class="form-group">
                            <label for="inputName" class="col-lg-2 control-label">Họ và tên</label>
                            <div class="col-lg-10">
                                <input type="text" value="@(user != null ? user.ProperName : "")" class="form-control" id="inputName" name="fullname" placeholder="Họ và tên đầy đủ của bạn">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputMobile" class="col-lg-2 control-label">Số điện thoại</label>
                            <div class="col-lg-10">
                                <input type="tel" class="form-control" value="@(user != null ? user.Phone : "")"  id="inputMobile" name="mobile" placeholder="Số điện thoại di động của bạn">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class="col-lg-2 control-label">Địa chỉ email</label>
                            <div class="col-lg-10">
                                <input type="email" class="form-control" id="inputEmail" value="@(user != null ? user.Email : "")" name="email" placeholder="Địa chỉ email của bạn">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputCity" class="col-lg-2 control-label">Tỉnh/Thành phố</label>
                            <div class="col-lg-10">
                                <select id="inputCity" class="form-control" name="city" onchange="loadDistrict();">
                                    @for (int i = 0; i < cities.Count; i++)
                                    {
                                        <option value="@cities[i].ID"  "@(i == (user != null ? user.CityID : 0) ? "selected" : "")">@cities[i].Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputDistrict" class="col-lg-2 control-label">Quận/Huyện</label>
                            <div class="col-lg-10">
                                <select id="inputDistrict" class="form-control" name="district">
                                    @* @for (int i = 0; i < districts.Count; i++)
                                {
                                    <option value="@districts[i].ID" "@(i == 0 ? "selected" : "")">@districts[i].Name</option>
                                }*@
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputAddress" class="col-lg-2 control-label">Địa chỉ</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" value="@(user != null ? user.Address : "")" id="inputAddress" name="address" placeholder="Địa chỉ đầy đủ và chính xác nơi nhận hàng">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane" id="checkout-payment">
                    <form>
                        <h4>Chọn phương thức thanh toán:</h4>
                        <div id="onlineBank">
                            <label>
                                <img class="payment-icon pull-left" src="http://mayy.guu.vn/Styles/images/payment/sohapay3.png" />
                                <input type="radio" value="@((int)ByHand.Services.Code.EPayType.SoHaPay)" name="Choice" class="step3-choice" checked>
                                &nbsp;&nbsp;Dùng thẻ Visa, Master hoặc thẻ ATM có Internet Banking

                                        <ul>
                                            <li>Thanh toán nhanh gọn, sử dụng thẻ Visa, Master Card hoặc thẻ ATM (tài khoản có Internet Banking).</li>
                                            <li>Hỗ trợ thẻ của <a href="#" id="banksupport" data-toggle="popover" data-placement="right" data-original-title="Các ngân hàng hỗ trợ">22 ngân hàng</a>.</li>
                                        </ul>
                            </label>
                        </div>
                        <div id="COD">
                            <label>
                                <img class="payment-icon pull-left" src="http://mayy.guu.vn/Styles/images/payment/cop.png" />
                                <input type="radio" value="@((int)ByHand.Services.Code.EPayType.COD)" name="Choice" class="step3-choice">
                                &nbsp;&nbsp;Thu tiền mặt tận nơi (COD)

                                        <ul>
                                            <li>Trong thời gian 3 ngày làm việc, sẽ có nhân viên liên lạc và đến tận nơi thu tiền, giao hàng cho Quý khách.</li>
                                            <li>Quý khách vui lòng trả thêm <span class="text-danger">10.000đ</span> chi phí.</li>
                                        </ul>
                            </label>
                        </div>
                        <div id="ATM">
                            <label>
                                <img class="payment-icon pull-left" src="http://mayy.guu.vn/Styles/images/payment/atm.png" />
                                <input type="radio" value="@((int)ByHand.Services.Code.EPayType.BankTransfer)" name="Choice" class="step3-choice">
                                &nbsp;&nbsp;Chuyển tiền qua ngân hàng

                                        <ul>
                                            <li>Phí chuyển tiền do người mua chi trả.</li>
                                            <li>Đơn hàng sẽ bị hủy nếu sau 24h không nhận được thông báo chuyển tiền (chỉ tính giờ hành chính).</li>
                                        </ul>
                            </label>
                        </div>
                        <div class="alert alert-success">Bấm vào nút <strong>Tiếp tục</strong> để hoàn tất thanh toán.</div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default backstep pull-left"><span class="glyphicon glyphicon-chevron-left"></span>Quay lại</button>
            <button type="button" class="btn btn-primary nextstep">Tiếp tục <span class="glyphicon glyphicon-chevron-right"></span></button>
        </div>
        <div style="display: none;" id="hidden-districts">
            @for (int i = 0; i < districts.Count; i++)
            {
                <input type="hidden" id="districts-@districts[i].CityID-@districts[i].ID" value="@districts[i].Name" />
@*<option value="@districts[i].ID" "@(i == 0 ? "selected" : "")">@districts[i].Name</option>*@
            }
        </div>
    </div>

    <script src="~/Content/js/jquery.min.js" type="text/javascript"></script>
    <script src="~/Content/js/gen_validatorv4.js"></script>
    <script src="~/Content/js/bootstrap.min.js"></script>
    <script>
        //init variable
        var img = '<img src="/Content/img/banks.png" />';
        var logusername = '@Resources.Resource.DefaultLogUsername';
        var logmestype = '@Resources.Resource.DefaultLogUserMes';
        var logusertype = '@Resources.Resource.DefaultLogUsertype' * 1;
        var userdistrictid = '@(user == null ? 0 : user.DistrictID)';
        var numberoption = '@options.Count';
        var producttitle = $('#product-title').text();
        var order = new Object();
        order.orderid = 0;
        order.productid = '@Model.ID';
        order.price = '@Model.Price';
        order.tempID = '@tempID';
        order.refid = '@ViewData["refid"]';
        order.reflocation = '@ViewData["reflocation"]';
        //function helper
        function createNOption(number) {
            var output = "";
            for (var i = 1; i <= number; i++) {
                var select = "";
                if (i == 1) select = "selected";
                var source = '<option ' + select + ' value="' + i + '">' + i + '</option>';
                output = output + source;
            }
            return output;
        }
        function loadDistrict() {
            var cityid = $("#inputCity").val();
            $('#inputDistrict').empty();
            var selecteddistrict = "0";
            $('input[id^=districts-' + cityid + '-]').each(function (index, element) {
                var id = $(element).attr('id').substring(('districts-' + cityid + '-').length);
                var name = $(element).val();
                var select = "";
                if (id == userdistrictid) {
                    select = "selected";
                    selecteddistrict = id;
                }
                var html = '<option value="' + id + '"  ' + select + '>' + name + '</option>';
                $('#inputDistrict').append(html);
            });
            if (selecteddistrict == "0") {
                var html = '<option value="0" selected>Không xác định</option>';
            } else {
                var html = '<option value="0" >Không xác định</option>';
            }
            $('#inputDistrict').append(html);
        }
        function initvalidator() {
            var frmvalidator = new Validator("byhand-infocustomer-form");
            frmvalidator.addValidation("fullname", "req", "Bạn chưa nhập tên.");
            frmvalidator.addValidation("email", "req", "Bạn chưa nhập địa chỉ email.");
            frmvalidator.addValidation("email", "email", "Địa chỉ email chưa chính xác.");
            frmvalidator.addValidation("mobile", "req", "Bạn chưa nhập số điện thoại.");
            frmvalidator.addValidation("mobile", "regexp=^0((9[0-9])|(1(2[1-9]|6[4-9]|88|99)))[0-9]{7}$", "Số điện thoại chưa chính xác.");
            frmvalidator.addValidation("address", "req", "Bạn chưa nhập địa chỉ.");
            frmvalidator.addValidation("quantity", "gt=0", "Bạn chưa chọn sản phẩm để mua.")
            //frmvalidator.addValidation("address", "regexp=[\d]+", "Bạn nhập địa chỉ chưa chính xác.");
            //frmvalidator.EnableOnPageErrorDisplay();
            frmvalidator.EnableMsgsTogether();
        }
        function getcurrrentstep() {
            return $('#byhand-wrapper-widgetpopup').find('.nav').find('.active').find('a').attr('data-step');
        }
        function processinfopayment(e) {
            if (!submitform()) {
                $('a[data-step=2]').click();
                e.stopPropagation();
                return;
            } else {
                $('.backstep').show();
                $('.nextstep').show();
                //prepare data for post
                order.quantity = $('#inputQuantity').val();
                order.city = $("#inputCity").val();
                order.district = $("#inputDistrict").val();
                order.name = $('#inputName').val();
                order.mobile = $('#inputMobile').val();
                order.email = $('#inputEmail').val();
                order.address = $('#inputAddress').val();
                order.optionsvalue = $('#optionsvalue').val()
                preOrder();
            }
        }
        function byhand_update_quatity() {
            var optionsvalue = "";
            var totalprice = 0;
            var totalquantity = 0;
            $('#table-cart').find('tr[id]').each(function (index, element) {
                var quantity = $(element).find('select').val();
                if (quantity == 0) {
                    $(element).remove();
                } else {
                    totalquantity = totalquantity + quantity * 1;
                    var lastprice = order.price * 1 * quantity;
                    totalprice = totalprice * 1 + lastprice;
                    $(element).find('td[data-col=calculatesprice]').text(lastprice + 'đ');
                    optionsvalue = optionsvalue + $(element).attr('data-option') + ":" + quantity + ";";
                }
            });
            if (totalprice == 0) {
                $('#table-cart').find('tr:last').find('td:last').text('0đ');
                $('#inputQuantity').val(totalquantity);
                $('#optionsvalue').val(optionsvalue);
            } else {
                $('#table-cart').find('tr:last').find('td:last').text(totalprice + 'đ');
                $('#inputQuantity').val(totalquantity);
                $('#optionsvalue').val(optionsvalue);
            }

        }
        function submitform() {
            if (document.forms['byhand-infocustomer-form'].onsubmit()) {
                return true;
            }
            return false;
        }
        function checkoutbysohapay() {
            order.paytype = $('input:radio[name=Choice]:checked').val();
            if (order.orderid == 0) {
                return;
            }
            //remove to enable all payment type
       @* if (order.paytype == '@((int)ByHand.Services.Code.EPayType.SoHaPay)') {*@
            checkoutOrder();
            //}
        }
        $(document).ready(function () {
            $('#banksupport').popover({
                trigger: 'hover',
                content: img,
                html: true
            });

            if (numberoption <= 0) {
                var html = '<tr id="productnooption" > <td>' + producttitle + '</td> <td data-col="quantity"> <div class="input-group" style="width: 80px;"> <select class="form-control " data-type="quantity" onchange="byhand_update_quatity();">' + createNOption(10) + '</select> </div> <!-- /input-group --> </td> <td data-col="price">' + order.price + 'đ</td> <td data-col="calculatesprice">' + order.price + 'đ</td> </tr>';
                $(html).insertBefore($('#table-cart').find('tr:last'));
                byhand_update_quatity();
            }
            loadDistrict();
            //var viewportWidth = $(window).width();
            //alert(viewportWidth);
            //var viewportHeight = $(window).height()
            //alert(viewportHeight);
            initvalidator();
            $('#byhand-payment-modal').modal();
            $('#byhand-accordion').collapse({ toggle: true });
            $('#byhand-accordion').find('input[name=Choice]').click(function () {
                var select = $(this).siblings('a[data-toggle=collapse]').attr('href');
                var that = $(select);
                $('.panel-collapse').each(function () {
                    if ($(this).hasClass('in')) {
                        $(this).collapse('hide');
                    }
                });
                if (!$(that).hasClass('in')) {
                    $(that).collapse('show');
                }
            });
            $('.backstep').click(function () {
                var curstep = getcurrrentstep();
                if (curstep == '2') {
                    $('a[data-step=1]').click();
                }
                if (curstep == '3') {
                    $('a[data-step=2]').click();
                }
            });
            $('.nextstep').click(function () {
                var curstep = getcurrrentstep();
                if (curstep == '1') {
                    $('a[data-step=2]').click();
                }
                if (curstep == '2') {
                    $('a[data-step=3]').click();
                }
                if (curstep == '3') {
                    checkoutbysohapay();
                }
            });
            $('a[data-step=3]').click(function (e) {
                processinfopayment(e);
            });
            $('a[data-step=1]').click(function () {
                $('.backstep').hide();
                $('.nextstep').show();
            });
            $('a[data-step=2]').click(function () {
                $('.backstep').show();
                $('.nextstep').show();
            });
        });
        //call server
        function preOrder() {
            $.post("/Order/PreOrder", $.param(order), function (data) {
                if (data.result == true) {
                    order.orderid = data.id;
                }
            });
        }
        function checkoutOrder() {
            $.ajax({
                type: 'POST',
                url: "/Order/CheckOutOrder",
                data: $.param(order),
                async: false,
                success: function (data) {
                    if (data.result == true) {
                        var newUrl = "";
                        if (data.paytype == '@((int)ByHand.Services.Code.EPayType.SoHaPay)') {
                        newUrl = data.url;
                    } else if (data.paytype == '@((int)ByHand.Services.Code.EPayType.COD)') {
                        newUrl = "http://"+window.location.host + "/Order/ResultPaymentOnByHand?paytype=@((int)ByHand.Services.Code.EPayType.COD)&id=" + order.orderid;
                    } else if (data.paytype == '@((int)ByHand.Services.Code.EPayType.BankTransfer)') {
                        newUrl = "http://" + window.location.host + "/Order/ResultPaymentOnByHand?paytype=@((int)ByHand.Services.Code.EPayType.BankTransfer)&id=" + order.orderid;
                    }
            var newWindow = window.open('', '_parent');
            newWindow.location = newUrl;
            newWindow.focus();
        }
            }
        });
}
//cart function
function addItemToCart() {
    var title = producttitle;
    var tempid = "";
    var option = "";
    var optiondata = "";
    var length = $('h5[id^=option-name-]').length;
    $('h5[id^=option-name-]').each(function (index, element) {
        var optionid = $(element).attr('id').substring('option-name-'.length);
        //var optionid = $(element).text();
        var optionvalue = $('#select-option-value-' + optionid).val();
        var optionname = $(element).text();
        optiondata = optiondata + optionname + "_" + optionvalue + "-";
        if (index != (length - 1)) {
            option = option + " " + optionname + " : " + optionvalue + " - ";
        } else {
            option = option + " " + optionname + " : " + optionvalue;
        }
        var thistempid = $('#select-option-value-' + optionid).find('option:selected').attr('data-tempid');
        tempid = tempid + thistempid;
    });
    var test = $('tr#' + tempid);
    if (test.length === 0) {
        var html = '<tr id="' + tempid + '" data-option="' + optiondata + '"> <td>' + title + '<br /> ' + option + '</td> <td data-col="quantity"> <div class="input-group" style="width: 80px;"> <select class="form-control " data-type="quantity" onchange="byhand_update_quatity();"><option value="0">Loại bỏ</option>' + createNOption(10) + '</select> </div> <!-- /input-group --> </td> <td data-col="price">' + order.price + 'đ</td> <td data-col="calculatesprice">' + order.price + 'đ</td> </tr>';
        $(html).insertBefore($('#table-cart').find('tr:last'));
        byhand_update_quatity();
    } else {
        alert("Sản phẩm bạn đã thêm vào giỏ. Hãy cập nhật số lượng.");
    }

}
    </script>
</body>
</html>
